<template>
  <div class="songList">
    <songListRow></songListRow>
    <el-empty 
    :image="`${url}/images/empty.png`"
    v-if="keyword==``||songLists.length==0"
    :description="keyword==''?`咱 搜 不 到 任 何 东 西 呀！为 你 推 荐 以 下 内 容`:'咱 搜 不 到 任 何 东 西 呀！'"
    ></el-empty>
    <listLine :col="index" :list="item" v-for="(item,index) of songLists" :key="index" :index="index"></listLine>
    
  </div>
</template>

<script>
import songListRow from '../components/songListRow.vue'
import listLine from '../components/listLine.vue'
export default {
    components:{
        songListRow,
        listLine
    },
    data(){
      return {
        songLists:[]
      }
    },
    props:{
        keyword:null,
        url:null
    },
    watch:{
      keyword(){
        this.getSearch()
      }
    },
    methods:{
      getSearch(){
            this.$store.commit("getSearch",[2,this.keyword,(data)=>{
            this.songLists=data
        }])
        }
    },
    mounted(){
      this.getSearch()
    }
}
</script>

<style>

</style>